<template>
  <div class="item" @click="toStore">
    <van-card :thumb="item.pic">
      <template #desc>
        <p>
          <van-row>
            <van-col span="17" class="desc-msg">
              <span class="desc-score">4.9分</span>
              <span class="desc-sel">月销 1000+</span>
              <span class="desc-preson">人均 ￥25</span>
            </van-col>
            <van-col span="7" class="tag">
              <van-tag color="linear-gradient(to right, #fde7bd, #e3bd7f" text-color="#563d24">美团专送</van-tag>
            </van-col>
          </van-row>
        </p>
        <p>
          <van-row>
            <van-col span="15" class="desc-msg">
              <span>起送 ￥{{ item.sales }}</span>
              <span>配送 约￥2.8</span>
            </van-col>
            <van-col span="9" class="desc-time">
                <span >35分钟</span>
              <span>3.4公里</span>
            </van-col>
          </van-row>
        </p>
        <p>
            <van-tag size="medium" color="#f7f6e1" text-color="#87794a">
                <van-icon :name="item.ico" style="color:#fac549"/>
                {{item.top}}               
            </van-tag> 
        </p>
      </template>
      <template #title>
        <span class="title">{{ item.title }}</span>
      </template>
      <template #tags>
        <van-tag class="tagColor" plain type="danger" v-for="i in item.label" :key="i">{{
          i
        }}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
  props: ["item"],
  setup(){
    const router=useRouter()
    const toStore=()=>{
      router.push('./store')
    }
    return {
      toStore
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .tagColor{
    padding: 1px 5px;
    border: 0px solid rgba(241, 83, 83,0.5);
}
/deep/ .van-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
p {
  margin: 5px 0px;
  padding: 0;
  color: slategrey;
  .desc-msg{
    span{
        margin-right: 5px;
    }
  }
  .desc-time{
   span{
    margin-left: 5px;
   }
  }
  .desc-score {
    color: #eb6e29;
    font-weight: 600;
  }
  .tag{
    text-align: right;
  }
}

.item {
  margin-top: 10px;
  background-color: white;
  border-radius: 10px;
  text-align: left;
  .title {
    font-size: 15px;
    font-weight: 600;
  }
  .van-tag {
    margin-left: 5px;
  }
}
</style>